<template>
  <view class="tab-control">
    <template v-for="(title, index) in titles" :key="title">
      <view class="item" :class="{active: currentIndex === index}" @click="tabItemClick(index)">
        <view class="title">{{ title }}</view>
      </view>
    </template>
  </view>
</template>

<script setup>
  import { ref } from "vue";
  const props = defineProps({
    titles: {
      type: Array,
      default: () => []
    }
  })
  
  const emit = defineEmits(['tabItemClick'])
  
  const currentIndex = ref(0)
  const tabItemClick = (index) => {
    currentIndex.value = index
    emit("tabItemClick", index)
  }
</script>

<style lang="less">
  .tab-control {
     display: flex;
     justify-content: space-around;
     
     padding: 10rpx;
     
     .item {
       
        .title {
          padding: 15rpx;
        }
     }
     
     .active {
       color: #ff5777;
       border-bottom: 6rpx solid #ff5777;
     }
  }
</style>
